
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>杜辉锋爱黄如芸</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="shortcut icon" href="favicon.ico">

	<style type="text/css">
		@font-face {
			font-family: digit;
			src: url('digital-7_mono.ttf') format("truetype");
		}
	</style>
	<link href="default.css" type="text/css" rel="stylesheet">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/garden.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="util/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="util/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="util/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
<div class="container" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="position: absolute; height: 400px;width: 400px; top:400px;">
	<!--轮播区域-->
	<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
		<!--轮播指标-->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1" ></li>
			<li data-target="#myCarousel" data-slide-to="2" ></li>
			<li data-target="#myCarousel" data-slide-to="3" ></li>
			<li data-target="#myCarousel" data-slide-to="4" ></li>
			<li data-target="#myCarousel" data-slide-to="5" ></li>
			<li data-target="#myCarousel" data-slide-to="6" ></li>
			<li data-target="#myCarousel" data-slide-to="7" ></li>
			<li data-target="#myCarousel" data-slide-to="8" ></li>
			<li data-target="#myCarousel" data-slide-to="9" ></li>
		</ol>
		<!--轮播指标-->
		<!--轮播项目-->
		<div class="carousel-inner">
			<div class="item active" >
				<img src="img/1.jpg" alt="First slide" >
			</div>
			<div class="item">
				<img src="img/2.jpg" alt="First slide" >
			</div>
			<div class="item">
				<img src="img/3.jpg" alt="First slide"  >
			</div>
			<div class="item">
				<img src="img/4.jpg" alt="First slide" >
			</div>
			<div class="item active" >
				<img src="img/5.jpg" alt="First slide" >
			</div>
			<div class="item">
				<img src="img/6.jpg" alt="First slide" >
			</div>
			<div class="item">
				<img src="img/7.jpg" alt="First slide"  >
			</div>
			<div class="item">
				<img src="img/8.jpg" alt="First slide" >
			</div>
			<div class="item">
				<img src="img/9.jpg" alt="First slide"  >
			</div>
			<div class="item">
				<img src="img/10.jpg" alt="First slide" >
			</div>
		</div>
	</div>
</div>

	<div id="mainDiv" style="position: absolute;">
		<div id="content">
			<div id="code" >
				<span class="comments">/**</span><br />
				<span class="space"/><span class="comments">* 我和如芸宝贝认识在2019年12月份,</span><br />
				<span class="space"/><span class="comments">* 那时候我在广州</span><br />
				<span class="space"/><span class="comments">* 如今我在福州，如芸在泉州.</span><br />
				<span class="space"/><span class="comments">*/</span><br />
				BoyName =  <span class="string">"DuHuiFeng"</span> <br />
				GirlName = <span class="keyword">"HuangRuYun"</span><br />
				<span class="comments">// Oct 25, 2020, I fall in love with you. </span><br />
				print("I Love HuangRuYun")<br />
				<span class="comments">// Luckily, you became my girlfriend eversince.</span><br />
				print("You love me.")<br />
				<span class="comments">// Since then, I miss u every day.</span><br />
				if (BoyName == GirlName)<br />
				<span class="comments">// And take care of u and our love.</span><br />
				print("together")<br />
				<span class="comments">// You say that you will be together with me.</span><br />
			</div>
			<div id="loveHeart">
				<canvas id="garden"></canvas>
				<div id="words">
					<div id="messages">
						Dear, I have fallen in love with you for
						<div id="elapseClock"></div>
					</div>
					<div id="loveu">
						Love u forever and ever.<br/>
						<div class="signature">- Du Hui Feng</div>
					</div>
				</div>
			</div>

		<div id="copyright" style="font-size:16px">
			Inspired by 杜辉锋 & 黄如芸<br />
			Copyright © 2020.10.25
		</div>
	</div>
	<script type="text/javascript">
		var offsetX = $("#loveHeart").width() / 2;
		var offsetY = $("#loveHeart").height() / 2 - 55;
		var together = new Date();
		together.setFullYear(2020, 9, 25);
		together.setHours(0);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);
		
		if (!document.createElement('canvas').getContext) {
			var msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "你的浏览器不支持 HTML5!<br/>推荐使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			$("#copyright").css("position", "absolute");
			$("#copyright").css("bottom", "20px");
		    document.execCommand("stop");
		} else {
			setTimeout(function () {
				startHeartAnimation();
			}, 5000);

			timeElapse(together);
			setInterval(function () {
				timeElapse(together);
			}, 500);

			adjustCodePosition();
			$("#code").typewriter();
		}
	</script>
	<div id="leafContainer"></div>   
</div>
<style>
 #leafContainer 
{
    position:fixed;
    z-index:2;
width:100%;
    height: 690px;
top:0;
overflow:hidden;
}
 #leafContainer > div 
{
    position: absolute;
    max-width: 100px;
    max-height: 100px;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}

#leafContainer > div > img {
     position: absolute;
     width: 100%;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}

 @-webkit-keyframes fade
{
   
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}

 @-webkit-keyframes drop
{
       0%   { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }
}
 @-webkit-keyframes clockwiseSpin
{
    0%   { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }
}
 @-webkit-keyframes counterclockwiseSpinAndFlip 
{
    
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
   
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}
 </style>

<script src="js/bjdh4.js" type="text/javascript"></script>

</body>
</html>
